<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>05.layui选项卡</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <!-- layui-tab: 选项卡 -->
            <div class="layui-tab">
                <!-- layui-tab-title: 选项卡名称 -->
                <ul class="layui-tab-title">
                    <!-- layui-this: 设置选中 -->
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- layui-show: 选中内容 -->
                    <div class="layui-tab-item layui-show">内容1</div>
                    <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div>
                    <div class="layui-tab-item">内容5</div>
                </div>
            </div>
            <hr/>

            <!-- 简洁风格 -->
            <div class="layui-tab layui-tab-brief">
                <!-- layui-tab-title: 选项卡名称 -->
                <ul class="layui-tab-title">
                    <!-- layui-this: 设置选中 -->
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- layui-show: 选中内容 -->
                    <div class="layui-tab-item layui-show">内容1</div>
                    <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div>
                    <div class="layui-tab-item">内容5</div>
                </div>
            </div>
            <hr/>

            <!-- 卡片风格 -->
            <div class="layui-tab layui-tab-card">
                <!-- layui-tab-title: 选项卡名称 -->
                <ul class="layui-tab-title">
                    <!-- layui-this: 设置选中 -->
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- layui-show: 选中内容 -->
                    <div class="layui-tab-item layui-show">内容1</div>
                    <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div>
                    <div class="layui-tab-item">内容5</div>
                </div>
            </div>
            <hr/>

            <div class="layui-row layui-col-lg10 layui-col-lg-offset1">
                <!-- 卡片风格, 可以关闭 -->
                <div class="layui-tab layui-tab-card" lay-allowClose="true">
                    <!-- layui-tab-title: 选项卡名称 -->
                    <ul class="layui-tab-title">
                        <!-- layui-this: 设置选中 -->
                        <li class="layui-this">网站设置</li>
                        <li>用户管理</li>
                        <li>权限分配</li>
                        <li>商品管理</li>
                        <li>订单管理</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- layui-show: 选中内容 -->
                        <div class="layui-tab-item layui-show">内容1</div>
                        <div class="layui-tab-item">内容2</div>
                        <div class="layui-tab-item">内容3</div>
                        <div class="layui-tab-item">内容4</div>
                        <div class="layui-tab-item">内容5</div>
                    </div>
                </div>
            </div>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航, 选项卡需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
            });
        </script>
    </body>
</html>
